<template>
	<view>
		<view style="margin: 32.616rpx 0 0 27.77rpx;width: 694.6rpx;">
			<view style="width: 100%;height: 96.63rpx;background: #FFFFFF;display: flex;align-items: center;box-sizing: border-box;padding: 0 42.27rpx;border-radius: 24.15rpx;justify-content: space-between;font-size: 26.58rpx;" @tap.stop="huoqu_biaoti">
				<input placeholder="请选择课程主题" disabled v-model="zhuti_" style="width: 308rpx;height: 26rpx;color: #000000;"/>
				<image src="../../../static/newshouye/xiala_.png" style="width: 24.15rpx;height: 16.3rpx;vertical-align: middle;"></image>
			</view>
			<view style="width: 100%;height: 96.63rpx;background: #FFFFFF;display: flex;align-items: center;box-sizing: border-box;padding: 0 42.27rpx;border-radius: 24.15rpx;justify-content: space-between;font-size: 26.58rpx;margin-top: 24.15rpx;">
				<picker @change="bindPickerChange"  :range="list_url" v-if="list_url.length>0">
					<view class="uni-input">{{zhuti_jie}}</view>
				</picker>
				<view v-if="list_url.length == 0" @tap="panduan">{{zhuti_jie}}</view>
				<image src="../../../static/newshouye/xiala_.png" style="width: 24.15rpx;height: 16.3rpx;vertical-align: middle;"></image>
			</view>
		</view>
		<view class="zong">
			上课时间
		</view>
		<view style="margin: 0 0 0 27.77rpx;width: 694.6rpx;">
			<view style="width: 100%;height: 96.63rpx;background: #FFFFFF;display: flex;align-items: center;box-sizing: border-box;padding: 0 42.27rpx;border-radius: 24.15rpx;font-size: 26.58rpx;justify-content: center;position: relative;">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<image src="../../../static/newshouye/xiala_.png" style="width: 24.15rpx;height: 16.3rpx;vertical-align: middle;position: absolute;left: 637rpx;"></image>
			</view>
			<view style="margin-top: 29.6rpx;display: flex;justify-content: space-between;">
				<view class="time">
					<view>
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
							<view class="uni-input">{{time}}</view>
						</picker>
					</view>
					<view style="position: absolute;left: 265.76rpx;">
						<image src="../../../static/newshouye/xiala_.png" style="width: 24.15rpx;height: 16.3rpx;vertical-align: middle;"></image>
					</view>
				</view>
				<view style="height: 96.63rpx;line-height: 96.63rpx;color: #363636;">
					-
				</view>
				<view class="time">
					<view>
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange_">
							<view class="uni-input">{{time_}}</view>
						</picker>
					</view>
					<view style="position: absolute;left: 265.76rpx;">
						<image src="../../../static/newshouye/xiala_.png" style="width: 24.15rpx;height: 16.3rpx;vertical-align: middle;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="zong">
			上课地点
		</view>
		<view style="width: 750rpx;padding: 0 27.77rpx;box-sizing: border-box;">
			<view style="width: 100%;height: 96.63rpx;background: #FFFFFF;display: flex;align-items: center;box-sizing: border-box;padding: 0 42.27rpx;border-radius: 24.15rpx;justify-content: space-between;font-size: 26.58rpx;">
				<input placeholder="请选择上课地点"  v-model="classroom" style="width: 100%;height: 26rpx;color: #000000;text-align: right;"/>
			</view>
		</view>
		<view v-if="yue_pai_lei != '老师安排'">
			<view class="zong" >
				最大学生数
			</view>
			<view style="width: 750rpx;padding: 0 27.77rpx;box-sizing: border-box;">
				<view style="width: 100%;height: 96.63rpx;background: #FFFFFF;display: flex;align-items: center;box-sizing: border-box;padding: 0 42.27rpx;border-radius: 24.15rpx;justify-content: space-between;font-size: 26.58rpx;">
					<input placeholder="请输入该节课最多可上课数量"  v-model="sty_num" style="width: 100%;height: 26rpx;color: #000000;text-align: right;"/>
				</view>
			</view>
		</view>
		<view class="zong">
			上课老师
		</view>
		<view style="width: 694.6rpx;height: 155.83rpx;box-sizing: border-box;margin-left:27.77rpx ;border-radius: 24.15rpx;background: #FFFFFF;display: flex;justify-content: center;align-items: center;" @tap="golaoshi">
			<view style="display: flex;align-items: center;height: 29rpx;overflow: hidden;" v-if="teacher_.length == 0">
				<view style="width: 25.368rpx;height: 25.368rpx;background: #FFFFFF;display: flex;position: relative;margin-top: 2rpx;">
					<view style="height: 25.368rpx;width: 2rpx;background: #EE7B30;position: absolute;left: 12.684rpx;"></view>
					<view style="height: 2rpx;width: 25.368rpx ;background: #EE7B30;position: absolute;top: 12.684rpx;"></view>
				</view>
				<view style="font-size: 29rpx;color: #FF7300;margin-left: 5rpx;">
					安排老师上课
				</view>
			</view>
			<view v-if="teacher_.length > 0" >
				<view v-for="(itme,index) in teacher_" :key="index">
					<image :src="itme.photo" mode="" style="width: 93rpx;height: 93rpx;border-radius: 50%;"></image>
				</view>
			</view>
		</view>
		<view v-if="yue_pai_lei == '老师安排'">
			<view class="zong">
				安排学生
			</view>
			<view style="width: 694.6rpx;min-height: 155.83rpx;box-sizing: border-box;margin-left:27.77rpx ;border-radius: 24.15rpx;background: #FFFFFF;display: flex;align-items: center;" @tap="goxuansheng" :class="study_.length>0?'xiaoyu':'dayu'">
				<view style="display: flex;align-items: center;height: 29rpx;overflow: hidden;" v-if="study_.length == 0">
					<view style="width: 25.368rpx;height: 25.368rpx;background: #FFFFFF;display: flex;position: relative;margin-top: 2rpx;">
						<view style="height: 25.368rpx;width: 2rpx;background: #EE7B30;position: absolute;left: 12.684rpx;"></view>
						<view style="height: 2rpx;width: 25.368rpx ;background: #EE7B30;position: absolute;top: 12.684rpx;"></view>
					</view>
					<view style="font-size: 29rpx;color: #FF7300;margin-left: 5rpx;">
						安排学生上课
					</view>
				</view>
				<view v-if="study_.length > 0" style="display: flex;flex-wrap: wrap;">
					<view v-for="(itme,index) in study_" :key="index" style="display: flex;flex-direction: column;align-items: center;margin-right: 21.77rpx;">
						<image :src="itme.map.userInfo.avatar" mode="" style="width: 93rpx;height: 93rpx;border-radius: 50%;"></image>
						<view style="font-size: 15rpx;color: #000000;width: 90rpx; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{itme.map.userInfo.nick_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 648.7rpx;height: 85.76rpx;line-height: 85.76rpx;background: #EE7B30;text-align: center;color: #FFFFFF;font-size: 29rpx;border-radius: 42.9rpx;margin: 56.77rpx 0 56.77rpx 50.736rpx;" @tap="gopaike" v-if="pai == '老师安排'">
			完成
		</view>
		<view style="width: 648.7rpx;height: 85.76rpx;line-height: 85.76rpx;background: #EE7B30;text-align: center;color: #FFFFFF;font-size: 29rpx;border-radius: 42.9rpx;margin: 56.77rpx 0 56.77rpx 50.736rpx;" @tap="gopaike_" v-if="pai != '老师安排'">
			完成
		</view>
	</view>
</template>
<script>
	export default {
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data(){
			return {
				zhuti_:"",
				canshu:{},
				title_arr:{},
				zhuti_jie:"课程结构",
				list_url:[],
				index:"",
				date:"",
				time:"",
				time_:"",
				classroom:"",
				sty_num:"",
				yue_pai_lei:"",
				teacher_:[],
				study_:[],
				pai:"",
				mechanism_id:"",
				master_id:"",
				num_zi:"",
				id:"",
				shusheng_jihe:""
			}
		},
		methods:{
		async	gopaike_(){
			    let me = this
				const res = await me.$myRequest({
					url:"/masterAppointment/insertOfflineCourse",
					methed:"POST",
					data:{
						type:"mechanism_offline",
						source:"android",
						mechanism_id:me.mechanism_id.toString(),
						master_id:me.master_id.toString(),
						connect_peoplenum:me.sty_num.toString(),
						status:"1",
						classroom:me.classroom,
						identity_type:"teach_paypal_course",
						service_type:"offline",
						offset:"8",
						start_time:me.date + " " + me.time + ":" + "00",
						end_time:me.date + " " + me.time_ + ":" + "00",
						master_set_price_id:me.id.toString(),
						title:me.zhuti_jie
					},
					header:{
						"content-type":"application/json"
					}
				})
				if(res.code == 0){
					uni.navigateTo({
						url:"/pages/tabBer/newsshouye/newsshouye"
					})
				}
			},
		async	gopaike(){
				let me = this
				const res = await me.$myRequest({
					url:"/masterAppointment/insertMechanismCourse",
					methed:"POST",
					data:{
						type:"mechanism_offline",
						source:"android",
						mechanism_id:me.mechanism_id.toString(),
						master_id:me.master_id.toString(),
						title:me.zhuti_jie,
						start_time:me.date + " " + me.time + ":" + "00",
						end_time:me.date + " " + me.time_ + ":" + "00",
						offset:"8",
						service_type:"offline",
						master_set_price_id:me.id.toString(),
						identity_type:"teach_paypal_course",
						study_card_ids:me.shusheng_jihe,
						classroom:me.classroom,
						number_of_lessons:me.num_zi.toString()
					},
					header:{
						"content-type":"application/json"
					}
				})
				if(res.code == 0){
					uni.navigateTo({
						url:"/pages/tabBer/newsshouye/newsshouye"
					})
				}
			},
			goxuansheng(){
				let me = this
				if(!me.zhuti_){
					uni.showToast({
						title:"请先选择主题",
						icon:"none"
					})
				}else{
					uni.reLaunch({
						url:"/pages/Meet/CreateMyclass/CreateMyclass?num=" + encodeURIComponent(JSON.stringify(me.canshu))
					})
				}
			},
			golaoshi(){
				let me = this
				if(me.classroom != "" || me.sty_num != ""){
					let data = {
						classroom:me.classroom,
						sty_num:me.sty_num
					}
					me.canshu = Object.assign(me.canshu,data)
				}
				uni.reLaunch({
					url:"/pages/Meet/chooseAddress/chooseAddress?num=" + encodeURIComponent(JSON.stringify(me.canshu))
				})
			},
			bindTimeChange: function(e) {
				let me = this
				me.time = e.target.value
				let data = {
					time:me.time
				}
				me.canshu = Object.assign(me.canshu,data)
			},
			bindTimeChange_: function(e) {
				let me = this
				me.time_ = e.target.value
				let data = {
					time_:me.time_
				}
				me.canshu = Object.assign(me.canshu,data)
			},
			bindDateChange: function(e) {
				let me = this
				me.date = e.target.value
				let data = {
					date:me.date
				}
				me.canshu = Object.assign(me.canshu,data)
			},
			panduan(){
				uni.showToast({
					title:"请填写课程主题",
					icon:"none"
				})
			},
			bindPickerChange: function(e) {
				let me = this
				me.num_zi = +(e.detail.value) + 1
				me.zhuti_jie = me.list_url[e.target.value] 
				let data = {
					zhuti_jie:me.zhuti_jie,
					num_zi:me.num_zi
				}
				me.canshu = Object.assign(me.canshu,data)
			},
			huoqu_biaoti(){
				let me = this
				if(me.canshu.zhuti_jie){
					delete me.canshu.zhuti_jie
				}
				if(me.canshu.num_zi){
					delete me.canshu.num_zi
				}
				uni.navigateTo({
					url:"/pages/World/ImgDetails/ImgDetails?num=" + encodeURIComponent(JSON.stringify(me.canshu))
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			dangqian(){
				let me = this
				let d = new Date().getTime()
				let b = new Date(d)
				let nian = b.getFullYear()
				let yue = (b.getMonth() + 1) < 10 ? "0" + (b.getMonth() + 1) : b.getMonth() + 1
				let ri = b.getDate() < 10 ? "0" + b.getDate() : b.getDate()
				let shi = b.getHours() < 10 ? "0" +  b.getHours() : b.getHours()
				let fen = b.getMinutes() < 10 ? "0" +  b.getMinutes() :  b.getMinutes()
				me.time = shi + ":" + fen
				me.time_ = shi + ":" + fen
				me.date = nian + "-" + yue + "-" + ri
			}
		},
		onLoad(options) {
			let me = this
			me.dangqian()
			const val_ = JSON.parse(decodeURIComponent(options.num))
			me.pai = val_.yue_pai_lei
			me.yue_pai_lei = val_.yue_pai_lei
			me.canshu = val_
			if(me.canshu.id){
				me.id = me.canshu.id
			}
			if(me.canshu.title){
				me.zhuti_ = me.canshu.title
				let url = me.canshu.titile_url
				me.list_url = url.split("#$*")
			}
			if(me.canshu.data){
				me.teacher_ = me.canshu.data
				me.master_id = me.canshu.data[0].user_id
			}
			if(me.canshu.xuexheng){
				me.study_ = me.canshu.xuexheng
				let srt = []
				me.study_.forEach((itme) => {
					srt.push(itme.studycard_id)
				})
				let srt_ = srt.toString()
				me.shusheng_jihe = srt_
			}
			if(me.canshu.time){
				me.time = me.canshu.time
			}
			if(me.canshu.time_){
				me.time_ = me.canshu.time_
			}
			if(me.canshu.date){
				me.date = me.canshu.date
			}
			if(me.canshu.classroom){
				me.classroom = me.canshu.classroom
			}
			if(me.canshu.sty_num){
				me.sty_num = me.canshu.sty_num
			}
			if(me.canshu.zhuti_jie){
				me.zhuti_jie = me.canshu.zhuti_jie
			}
			if(me.canshu.num_zi){
				me.num_zi = me.canshu.num_zi
			}
			if(me.canshu.zhuti_jie){
				me.zhuti_jie = me.canshu.zhuti_jie
			}
			try{
				me.mechanism_id = uni.getStorageSync('userif_list').mechanism_id
			}catch(e){}
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.zong{
		height: 100.87rpx;
		width: 300rpx;
		margin-left: 46.51rpx;
		line-height: 100.87rpx;
		font-size: 29rpx;
		color: #343434;
		font-weight: bold;
	}
	.time{
		width: 317rpx;
		height: 96.63rpx;
		background: #FFFFFF;
		border-radius: 18.12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26.58rpx;
		color: #363636;
		position: relative;
	}
	.dayu{
		justify-content: center;
	}
	.xiaoyu{
		justify-content: flex-start;
	}
	// .uni-input{
	// 	width:600rpx ;
	// 	height: 96.63rpx;
	// 	line-height:96.63rpx ;
	// 	text-align: left;
	// }
</style>